<template>
	<view class="my_content">
		<view class="bgColor"></view>
		<view class="userInfo">
			<view class="left" @click="showDialog">
				<image class="avatar" :src="userAvatarUrl" alt=""/>
				<view class="name">
					<view class="name1" v-if="phone">{{
				    userInfo.name ? userInfo.name : namePhone
				  }}</view>
					<view class="name1" v-else>未登录</view>
					<view class="phone" v-if="phone">{{ phone }}</view>
				</view>
				<image class="tubiao" src="/static/my/huiyuan.png" v-if="userInfo.id"></image>
			</view>
			<view class="right" @click.stop="showQrCode">
				<image class="qrcode" src="/static/my/qrcode.png"></image>
			</view>
		</view>
		<view class="tokenInfo">
			<view class="one" @click.stop="toTokenPages('notUse')">
				<view class="num">{{ userInfo.count ? userInfo.count : 0 }}</view>
				<view class="txt">{{ $tokenName }}兑换券</view>
			</view>
			<view class="two" @click.stop="toEveryPages('/packageB/pages/MyToken/MyToken')">
				<view class="num">{{ userInfo.tokenNum ? userInfo.tokenNum : 0 }}</view>
				<view class="txt">去提现</view>
			</view>
			<view class="three" @click.stop="toEveryPages('/packageB/pages/tokenRecord/index')">
				<view class="num">{{ userInfo.exchangeNum ? userInfo.exchangeNum : 0 }}</view>
				<view class="txt">已兑{{ $tokenName }}</view>
			</view>
		</view>


		<view class="card-container">
			<view class="consumeCard2">
				<view class="smallCard" @click.stop="toEveryPages('/packageB/pages/tokenRecord/index')">
					<image class="iconImg" src="/static/my/5.png"></image>
					<text class="txt">兑换记录</text>
					<navigator>
						<uni-icons type="forward" size="20"></uni-icons>
					</navigator>
				</view>
			</view>
			<view class="consumeCard2">
				<view class="smallCard" @click.stop="toEveryPages('/packageB/pages/consume/index')">
					<image class="iconImg" src="/static/my/3.png"></image><text class="txt">消费记录</text>
					<navigator>
						<uni-icons type="forward" size="20"></uni-icons>
					</navigator>
				</view>
			</view>
			<view class="consumeCard2">
				<!-- /packageB/pages/withdraw/withdraw -->
				<!-- v-if="showWithDraw" -->
				<view class="smallCard" @click.stop="toEveryPages('/packageB/pages/bankCard/bankCard')">
					<image class="iconImg" src="/static/my/4.png"></image><text class="txt">银行卡设置</text>
					<navigator>
						<uni-icons type="forward" size="20"></uni-icons>
					</navigator>
				</view>
			</view>
			<view class="consumeCard2">
				<view class="smallCard" @click.stop="showToast">
					<image class="iconImg" src="/static/my/1.png"></image><text class="txt">联系客服</text>
					<uni-icons type="forward" size="20"></uni-icons>
				</view>
			</view>
			<view class="consumeCard2" v-if="userInfo.id">
				<view class="smallCard" @click.stop="loginOut">
					<image class="iconImg" src="/static/my/loginOut.png"></image><text class="txt">退出登录</text>
					<uni-icons type="forward" size="20"></uni-icons>
				</view>
			</view>
			<!-- 			<view class="consumeCard2">
				<view class="smallCard" @click.stop="toEveryPages('/packageB/pages/RealName/RealName')">
					<image class="iconImg" src="/static/my/2.png"></image><text class="txt">实名认证</text>
					<uni-icons type="forward" size="20"></uni-icons>
				</view>
			</view> -->
		</view>

		<view class="qrBox" v-if="qrCode">
			<view v-if="qrCode" class="mask" @click="hideQrCode"></view>
			<view v-if="qrCode" class="modal">
				<view>
					<uqrcode ref="uqrcode" size="350" sizeUnit="rpx" :loading="loading" canvas-id="qrcode" :value="qrPhone"
						:options="{ margin: 5,foregroundImageSrc:'/static/logo.png' }"></uqrcode>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" :safe-area="false" :is-mask-click="false">
			<view class="containar">
				<view class="top">
					<view class="pic">
						<image src="/static/logo.png"></image>
					</view>
					<view class="text">
						裕酷科技 申请
					</view>
				</view>
				<view class="sub-top">
					<view class="text-b">
						获取您的昵称、头像
					</view>
					<view class="text-info">
						更好的展示您的个人信息
					</view>
				</view>
				<view class="bottom">
					<view class="line">
						<view class="left">
							头像
						</view>
						<view class="right">
							<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
								上传头像<image :src="avatarUrl?avatarUrl:'/static/my/avatar.png'" class="refreshIcon"></image>
							</button>
						</view>
					</view>
					<view class="line">
						<view class="left">
							昵称
						</view>
						<view class="right">
							<input type="nickname" class="weui-input" :value="nickName" @change="bindchange" placeholder="填写您的称呼"
								@input="bindinput" />
						</view>
					</view>
				</view>
				<view class="show-hide-button">
					<button @click="cancle">取消</button>
					<button class="submit" @click="updateUserInfo">确定</button>
				</view>
			</view>
		</uni-popup>

		<view class="bottom2">
			<view class="top">
				版本号 {{version}}
			</view>
			<view class="bot">
				豫ICP备2023034296号-2X
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMemberInfo
	} from '@/apis/user'
	import {
		reqUploadUserAvatar,
		reqUpdateUserInfo,
		reqGetRealnameStatus
	} from '@/apis/my'
	import {
		rsaEncrypt
	} from '@/utils/rsa'
	import {
		getToken
	} from "@/utils/auth.js"
	export default {
		name: 'My',
		data() {
			return {
				loading: true,
				qrCode: false,
				qrPhone: '',
				// 里面包含用户id
				userInfo: {},
				// 用户手机号
				phone: '',
				namePhone: '',
				// 上传后的图片路径
				onlineFilePath: '',
				// 上传前的图片路径
				avatarUrl: '',
				// 用户昵称
				nickName: '',
				showWithDraw: false,
				userAvatarUrl: '/static/my/avatar.png',
				// 0 为实名  1 已实名未绑卡  2均完成
				realType: 0,
				version: "",
			}
		},
		computed: {
			$tokenName() {
				return this.$config.tokenName
			}
		},
		onShow() {
			this.getMemberInfo();
			// this.getDictToShowWithDraw();
			this.getInfoSync();
		},
		methods: {
			async getRealnameStatus() {
				let resd = await reqGetRealnameStatus({
					id: this.userInfo.id
				});
				this.realType = 2;
				console.log(resd);
				if (resd.code !== 200) {
					if (resd.code === 51003) {
						this.realType = 0;

					} else if (resd.code === 51004) {
						this.realType = 1;
					}
				}
			},
			async getMemberInfo() {
				// 登录过了
				if (getToken()) {
					const res = await getMemberInfo({
						id: this.$store.getters.userInfo.id
					})
					if (res.code === 200) {
						// const data = rsaDecrypt(res.data.data)
						this.userInfo = res.data;
						this.userAvatarUrl = this.userInfo.headImg ? this.userInfo.headImg : '/static/my/avatar.png';
						console.log("用户图片路径", this.userAvatarUrl);
						console.log('this.userInfo', this.userInfo)
						//校验手机号是否正确
						this.phone = this.userInfo.phone.replace(
							/^(\d{3})\d{4}(\d{4})$/,
							'$1****$2'
						)
						this.namePhone = this.userInfo.phone.replace(
							/^(\d{3})\d{4}(\d{4})$/,
							'$2'
						)
						// 实名认证状态
						this.getRealnameStatus();
					} else {
						uni.utils.toast(res.message)
					}
				} else {
					// 未登录
					this.phone = '';
					this.userAvatarUrl = '/static/my/avatar.png';
					this.userInfo = {};
				}

			},
			showToast() {
				uni.utils.toast('功能正在研发中...')
			},
			toEveryPages(url) {
				if (url == '/packageB/pages/bankCard/bankCard' && this.realType == 2) {
					url = '/packageB/pages/bankList/bankList'
				} else if (url == '/packageB/pages/bankCard/bankCard' && this.realType == 0) {
					if (!getToken()) {
						uni.navigateTo({
							url: '/packageB/pages/RealName/RealName'
						})
						return;
					}
					uni.showModal({
						content: "请先完成实名认证",
						confirmText: '确定',
						cancelColor: '#999',
						// showCancel:false,
						confirmColor: '#2f64ff',
						mask: true,
						success: (result) => {
							if (result.confirm) {
								uni.navigateTo({
									url: '/packageB/pages/RealName/RealName'
								})
							} else {
								console.log("取消");
							}
						},
					})
					return;
				}
				uni.navigateTo({
					url: url + '?memberId=' + this.$store.getters.userInfo.id
				})
			},
			toTokenPages(type) {
				uni.navigateTo({
					url: '/packageB/pages/tokenPages/tokenPages?' +
						'memberId=' +
						this.$store.getters.userInfo.id +
						'&type=' +
						type
				})
				// console.log(type)
			},

			async showDialog() {
				if (!getToken()) {
					// 调一个接口赶回登录页面
					await getMemberInfo({
						id: this.userInfo.id
					})
					return;
				}
				this.nickName = this.userInfo.name ? this.userInfo.name : this.namePhone
				this.avatarUrl = this.userInfo.headImg ? this.userInfo.headImg : '';
				this.$refs.popup.open();
			},
			onChooseavatar(e) {
				this.avatarUrl = e.detail.avatarUrl;
			},
			bindchange(e) {
				if (!e.detail.value) return;
				this.nickName = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.nickName = e.detail.value; //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
			},
			cancle() {
				this.avatarUrl = '';
				this.nickName = '';
				this.$refs.popup.close();
			},
			async updateUserInfo() {
				let {
					avatarUrl,
					userInfo: {
						id
					},
					nickName
				} = this;
				console.log("avatarUrl+++++", avatarUrl);
				console.log("nickName++++++", nickName);
				if (nickName.length >= 14) {
					uni.utils.toast('昵称小于14位');
					return;
				}
				if (avatarUrl === '' || !avatarUrl.includes('://tmp')) {
					let userInfo = await reqUpdateUserInfo({
						id,
						name: nickName
					})
					if (userInfo.code == 200) {
						this.getMemberInfo();
						uni.showToast({
							title: '修改成功',
							icon: 'success',
						})
					}
				} else {
					let onlineFilePath = await reqUploadUserAvatar(avatarUrl);
					console.log("修改：+++++", {
						id,
						name: nickName,
						headImg: onlineFilePath
					});
					let userInfo = await reqUpdateUserInfo({
						id,
						name: nickName,
						headImg: onlineFilePath
					})
					if (userInfo.code == 200) {
						this.getMemberInfo();
						uni.showToast({
							title: '修改成功',
							icon: 'success',
						})
					}
				}
				this.avatarUrl = '';
				this.nickName = '';
				this.$refs.popup.close();
			},

			// 展示手机号生成的二维码
			async showQrCode() {
				if (!getToken()) {
					// 调一个接口赶回登录页面
					await getMemberInfo({
						id: this.userInfo.id
					})
					return;
				}
				this.qrPhone = this.userInfo.phone;
				console.log(this.phone);
				this.loading = true;
				// const url = await QRCode.toDataURL(this.phone);
				// <uqrcode ref="uqrcode" canvas-id="qrcode" value="18736491750" :options="{ margin: 10 }"></uqrcode>

				this.qrCode = true;
				let t = setTimeout(() => {
					this.loading = false;
					clearTimeout(t);
					t = null;
				}, 500);
			},
			hideQrCode() {
				this.qrCode = false;
				this.loading = true;
			},
			getInfoSync() {
				// 条件编辑只在微信小程序显示
				// #ifdef MP-WEIXIN
				const accountInfo = wx.getAccountInfoSync();
				const version = accountInfo.miniProgram.version;
				const envVersion = accountInfo.miniProgram.envVersion;
				this.version = version ? version : envVersion;
				console.log(this.version, '小程序版本号')
				// #endif
			},
			loginOut() {
				
				uni.showModal({
					content: "确认是否退出登录？",
					confirmText: '确定',
					cancelColor: '#999',
					// showCancel:false,
					confirmColor: '#2f64ff',
					mask: true,
					success: (result) => {
						if (result.confirm) {
							this.$store.dispatch('user/logOut')
						} else {
							console.log("取消");
						}
					},
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #fff;
	}

	.my_content {
		position: relative;
		.bgImg {
			width: 100vw;
			position: fixed;
			top: 0;
			z-index: -1;
			height: 40vh;
		}

		// .bgColor {
		// 	width: 100vw;
		// 	position: fixed;
		// 	background-color: #eee;
		// 	top: 40vh;
		// 	z-index: -1;
		// 	height: 60vh;
		// }

		min-height: 100vh;

		// padding: 10px;
		.userInfo {
			z-index: 999;
			display: flex;
			padding: 40rpx;
			position: relative;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;
			}

			.right {
				width: 50rpx;
				height: 50rpx;
				margin-right: 30rpx;

				.qrcode {
					width: 100%;
					height: 100%;
				}
			}

			.avatar {
				height: 100rpx;
				width: 100rpx;
				border-radius: 50rpx;
			}

			.name {
				margin-left: 20rpx;

				// height: 60px;
				.name1 {
					font-size: 40rpx;
					font-weight: 700;
					// line-height: 30px;
					margin-bottom: 18rpx;
				}

				.phone {
					font-size: 20rpx;
				}
			}

			.tubiao {
				width: 138rpx;
				height: 48rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				margin-left: 20rpx;
				padding-top: 6rpx;
			}
		}

		.tokenInfo {
			display: flex;
			height: 70px;
			padding-top: 20rpx;
			margin-bottom: 40rpx;
			justify-content: space-evenly;

			.one {
				// flex: 1;
				margin: 0 auto;
				width: 28%;
			}

			.two {
				// flex: 1;
				width: 28%;
				margin: 0 auto;
			}

			.three {
				// flex: 1;
				width: 28%;
				margin: 0 auto;
			}

			.num {
				font-size: 40rpx;
				font-weight: 700;
				color: #1a1a1a;
				text-align: center;
				margin-bottom: 10px;
			}

			.txt {
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
			}
		}

		.consumeCard {
			margin: 0 20rpx;
			background-color: #fff;
			// height: 276rpx;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.iconImg {
				width: 52rpx;
				height: 52rpx;
				line-height: 52rpx;
			}

			.smallCard:nth-last-child(1) {
				margin-bottom: 0 !important;
			}

			.smallCard {
				display: flex;
				justify-content: space-between;
				padding-left: 5px;
				height: 52rpx;
				line-height: 52rpx;
				margin-bottom: 20rpx;

				.txt {
					flex: 1;
					margin-left: 20px;
				}
			}

			.smallCard:nth-child(1) {
				margin-bottom: 40rpx;
			}

			.smallCard:nth-child(2) {
				margin-bottom: 40rpx;
			}
		}

		.card-container {
			background-color: #fff;

			.consumeCard2 {
				background-color: #fff;
				height: 92rpx;
				border-radius: 16rpx;
				padding: 20rpx;
				margin: 0 20rpx;
				margin-bottom: 20rpx;

				.iconImg {
					width: 52rpx;
					height: 52rpx;
				}

				.smallCard {
					display: flex;
					justify-content: space-between;
					padding-left: 5px;
					height: 52rpx;
					line-height: 52rpx;

					margin-bottom: 20rpx;

					.txt {
						flex: 1;
						margin-left: 20px;
					}
				}
			}
		}



		.consumeCard2 {
			background-color: #fff;
			height: 92rpx;
			border-radius: 16rpx;
			padding: 20rpx;
			margin: 0 20rpx;
			margin-bottom: 20rpx;

			.iconImg {
				width: 52rpx;
				height: 52rpx;
			}

			.smallCard {
				display: flex;
				justify-content: space-between;
				padding-left: 5px;
				height: 52rpx;
				line-height: 52rpx;

				margin-bottom: 20rpx;

				.txt {
					flex: 1;
					margin-left: 20px;
				}
			}
		}
	}

	.containar {
		background-color: #fff;
		border-radius: 15rpx 15rpx 0 0;
		padding: 35rpx;
		.top {
			display: flex;
			align-items: center;

			.pic {
				width: 45rpx;
				height: 45rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				margin-left: 40rpx;
				font-weight: 600;
				font-size: 26rpx;
			}
		}

		.sub-top {
			margin-top: 30rpx;

			.text-b {
				font-weight: 500;
				font-size: 28rpx;
			}

			.text-info {
				margin-top: 10rpx;
				color: #cbcbcb;
				font-size: 26rpx;
			}
		}

		.bottom {
			padding: 20rpx;
			font-size: 28rpx;

			.line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				box-sizing: border-box;
				// background-color: red;
				border-bottom: 1rpx solid #cbcbcb;

				.left {
					font-size: 28rpx;
				}

				.right {
					/deep/ button {
						font-size: 28rpx;
						background-color: transparent;
						border-radius: 0;
						border: none;
						outline: none;
						display: flex;
						justify-content: flex-end;
						padding: 0;
						align-items: center;
						width: 400rpx;
						height: 70rpx !important;

						&:after {
							border: none !important;
						}

						image {
							margin-left: 20rpx;
							width: 70rpx;
							height: 70rpx;
						}
					}

					input {
						width: 400rpx;
						text-align: right;
					}
				}
			}
		}

		.show-hide-button {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;

			/deep/ button {
				height: 70rpx !important;
				line-height: 70rpx;
				width: 280rpx !important;
				font-size: 28rpx;

				&.submit {
					background-color: #2f64ff;
					color: #fff;
				}
			}

		}
	}


	.qrBox {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(102, 102, 102, 0.5);
	}

	.modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: white;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.bottom2 {
		position: absolute;
		bottom: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		font-size: 24rpx;
		color: #999;

		.top {
			margin-bottom: 12rpx;
			line-height: 28rpx;
		}
	}
</style>